<template>
	<view class="charts-box">
		<qiun-data-charts type="rose" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script>
	import {monthlypieData} from '@/api/product.js'
	export default {
		props:['yearMonth'],
		data() {
			return {
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['rose'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					// 
					// "#FF4C52","#48DE94","#1F90FF","#5644FF"
					color: ["#FEA492", "#7AECF8", "#A5A1FF", "#FAB2FF"],
					padding: [5, 5, 0, 5],
					enableScroll: false,
					legend: {
						show: true,
						position: "bottom",
						lineHeight: 20,
						fontSize:10
					},
					extra: {
						rose: {
							type: "area",
							minRadius: 30,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 2,
							borderColor: "#FFFFFF"
						}
					}
				}
			};
		},
		mounted() {
			this.getServerData();
		},
		watch:{
			yearMonth(){
				this.getServerData();
			}
		},
		methods: {
			getServerData() {
				monthlypieData(this.yearMonth).then(res=>{
					// console.log(res);
					// const keyMap = {
					//   type: 'name',
					//   value: 'value'
					// };
					
					let data = res.data;
					data.map(item=>item.labelText = `${item.type} : ${item.value}`)
					let result = []
					data.map(i=>{
						if(i.value){
							result.push({
								name:i.type,
								value:i.value
							})
						}
						
					})
					// const result = data.map(obj => 
					//   Object.keys(obj).reduce((acc, key) => {
					// 	 const newKey = keyMap[key] || key;
					// 	 acc[newKey] = obj[key];
					// 	 acc.labelText = `${acc.name} : ${acc.value}`
					// 	 if(acc[name] === '5-10'){
					// 		 acc.color = this.createGradient('#FEA492', '#FF4C52')
					// 	 }else if(acc[name] === '10-20'){
					// 		  acc.color = this.createGradient('#7AECF8', '#48DE94')
					// 	 }else if(acc[name] === '20-30'){
					// 		  acc.color = this.createGradient('#A5A1FF', '#1F90FF')
					// 	 }else if(acc[name] === '机制砂'){
					// 		  acc.color = this.createGradient('#FAB2FF', '#5644FF')
					// 	 }
					// 	 return acc;
					//   }, {})
					// );
					
					let resData = {
						series: [{
							data: result
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(resData));
				})
				//模拟从服务器获取数据时的延时
				// setTimeout(() => {
				// 	//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				// 	let res = {
				// 		series: [{
				// 			data: [{
				// 				"name": "一班",
				// 				"value": 50,
				// 				"labelText": "一班:50"
				// 			}, {
				// 				"name": "二班",
				// 				"value": 30,
				// 				"labelText": "二班:30"
				// 			}, {
				// 				"name": "三班",
				// 				"value": 20,
				// 				"labelText": "三班:20"
				// 			}, {
				// 				"name": "四班",
				// 				"value": 18,
				// 				"labelText": "四班:18"
				// 			}]
				// 		}]
				// 	};
				// 	this.chartData = JSON.parse(JSON.stringify(res));
				// }, 500);
			},
			 createGradient(startColor, endColor) {
			  const ctx = wx.createCanvasContext('roseCanvas');
			  const gradient = ctx.createLinearGradient(0, 0, 0, 300);
			  gradient.addColorStop(0, startColor);
			  gradient.addColorStop(1, endColor);
			  return gradient;
			}
		}
	};
</script>

<style scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 350rpx;
	}
</style>